<template>
  <view class="home-bg">
    <!-- 顶部栏 -->
    <view class="top-bar">
      <input class="search" placeholder="搜索课程/老师" />
      <image class="avatar" src="../../static/wode.png" />
    </view>
    <!-- 状态卡片区 -->
    <view class="status-cards">
      <view class="status-card">
        <text>专注度</text>
        <view class="circle">85%</view>
      </view>
      <view class="status-card ai-chat-btn" @tap="goToAIChat">
        <text class="ai-chat-text">AI助手</text>
      </view>
    </view>
    <!-- 学习状态折线图 -->
    <view class="chart-card">
      <text class="chart-title">学习状态</text>
      <image src="../../static/chart.png" class="chart-img" />
    </view>
    <!-- 快捷功能区（只保留错题本、口语训练） -->
    <view class="quick-features">
      <view class="quick-item">
        <view class="quick-icon-wrap">
          <image src="../../static/ciyutingxie.png" class="quick-icon" />
        </view>
        <text class="quick-text">错题本</text>
      </view>
      <view class="quick-item">
        <view class="quick-icon-wrap">
          <image src="../../static/yingyu.png" class="quick-icon" />
        </view>
        <text class="quick-text">口语训练</text>
      </view>
      <view class="quick-item" @tap="takePhotoSearch">
        <view class="quick-icon-wrap">
          <image src="../../static/paizhao.png" class="quick-icon" />
        </view>
        <text class="quick-text">拍照搜题</text>
      </view>
    </view>
    <!-- 底部导航栏由tabBar配置 -->
  </view>
</template>

<script setup>
function takePhotoSearch() {
  uni.chooseImage({
    count: 1,
    sourceType: ['camera'],
    success: function(res) {
      // 拍照完成后可处理图片，这里直接返回首页
      uni.showToast({ title: '已拍照，后续可识别题目', icon: 'success' })
    },
    fail: function() {
      // 用户取消拍照
    }
  })
}
function goToAIChat() {
  uni.navigateTo({ url: '/pages/ai-dialog/plan-chat' })
}
</script>

<style scoped>
.home-bg {
  min-height: 100vh;
  padding-bottom: 32rpx;
  background: linear-gradient(180deg, #f8fffc 0%, #e0f7fa 100%);
}
.top-bar { display: flex; align-items: center; justify-content: space-between; padding: 48rpx 32rpx 0 32rpx; }
.search { flex: 1; border-radius: 32rpx; border: none; padding: 20rpx; background: #fff; margin-right: 32rpx; box-shadow: 0 4rpx 16rpx rgba(7,193,96,0.08); font-size: 28rpx; }
.avatar { width: 72rpx; height: 72rpx; border-radius: 50%; box-shadow: 0 2rpx 8rpx rgba(7,193,96,0.08); }
.status-cards { display: flex; gap: 32rpx; margin: 40rpx 32rpx 0 32rpx; }
.status-card { flex: 1; background: #fff; border-radius: 32rpx; padding: 32rpx; display: flex; flex-direction: column; align-items: center; box-shadow: 0 4rpx 16rpx rgba(7,193,96,0.08); }
.circle { width: 72rpx; height: 72rpx; border-radius: 50%; background: #07c160; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 32rpx; margin-top: 12rpx; font-weight: bold; box-shadow: 0 2rpx 8rpx rgba(7,193,96,0.08); }
.status-icon { width: 48rpx; height: 48rpx; margin-top: 12rpx; }
.chart-card { background: #fff; border-radius: 32rpx; margin: 40rpx 32rpx 0 32rpx; padding: 32rpx; box-shadow: 0 4rpx 16rpx rgba(7,193,96,0.08); }
.chart-title { font-size: 32rpx; font-weight: bold; color: #07c160; margin-bottom: 16rpx; display: block; }
.chart-img { width: 100%; height: 160rpx; background: #e0e0e0; border-radius: 24rpx; }
.quick-features { display: flex; justify-content: space-around; margin: 48rpx 32rpx 0 32rpx; gap: 32rpx; }
.quick-item { display: flex; flex-direction: column; align-items: center; }
.quick-icon-wrap { background: #fff; border-radius: 50%; box-shadow: 0 4rpx 16rpx rgba(7,193,96,0.08); padding: 24rpx; margin-bottom: 12rpx; }
.quick-icon { width: 64rpx; height: 64rpx; }
.quick-text { font-size: 30rpx; color: #07c160; font-weight: bold; }
.ai-chat-btn {
  background: linear-gradient(90deg, #07c160 0%, #36d1c4 100%);
  cursor: pointer;
  transition: box-shadow 0.2s;
}
.ai-chat-btn:active {
  box-shadow: 0 2rpx 12rpx rgba(7,193,96,0.18);
}
.ai-chat-text {
  color: #fff;
  font-size: 32rpx;
  font-weight: bold;
  margin-top: 12rpx;
}
</style> 
